<template>
  <div class="container">
    <input 
      v-model="text" 
      type="text" 
      placeholder="请输入文字（如：新年快乐）"
      class="input"
    >
    <button 
      @click="startExplosion" 
      class="button"
    >
      开始爆炸
    </button>
    <canvas 
      ref="canvas" 
      class="canvas"
    ></canvas>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'
import TextParticleEffect from '../utils/TextParticleEffect'

export default {
  name: 'TextExplosion',
  setup() {
    const text = ref('新年快乐')
    const canvas = ref(null)
    let effect = null

    onMounted(() => {
      effect = new TextParticleEffect(canvas.value)
    })

    onUnmounted(() => {
      effect?.destroy()
    })

    const startExplosion = () => {
      if (text.value.trim()) {
        effect.setText(text.value)
        effect.explode()
      }
    }

    return {
      text,
      canvas,
      startExplosion
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  gap: 20px;
}

.input {
  padding: 10px 20px;
  font-size: 18px;
  border: 2px solid #3498db;
  border-radius: 5px;
  width: 300px;
}

.button {
  padding: 10px 30px;
  font-size: 18px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.button:hover {
  background-color: #2980b9;
}

.canvas {
  border: 1px solid #eee;
  background-color: #000;
  width: 800px;
  height: 400px;
}
</style> 